<div class="actions">
  <div class="top-title">
    <div class="prefix" i18n="@@common.action">Action</div>
    <div class="suffix">
      <span>{{selectedActions.length}} <ng-container i18n="@@common.num-actions">Action(s)</ng-container></span>
    </div>
  </div>
  <div class="selected-actions" *ngIf="selectedActions.length">
    <div nz-col class="action" *ngFor="let act of selectedActions">
      <div class="inner-box" nz-tooltip="{{act.name}} ({{act.description}})">
        {{act.displayName}} ({{act.name}})
      </div>
      <button nz-button nzType="default" [nzSize]="'large'" (click)="removeAction(act)"><i nz-icon nzType="close"></i></button>
    </div>
  </div>
  <nz-select class="nz-select-36" [class]="{invalid: isInvalid}" #actionsSelector
             i18n-nzPlaceHolder="@@iam.policies.details.select-action"
             nzPlaceHolder="Select action"
             nzShowSearch
             nzServerSearch
             [(ngModel)]="actionSelectModel"
             (ngModelChange)="onActionChange()"
             (nzOnSearch)="onSearchActions($event)"
             [nzOptionHeightPx]="54">
    <ng-container *ngFor="let action of filteredActions">
      <nz-option
        nzCustomContent
        [nzValue]="action"
        [nzLabel]="action.displayName"
        [nzHide]="isActionSelected(action)">
        <div class="action-selection-item">
          <div class="title">{{ action.displayName}}</div>
          <div class="digest">{{ getActionDigest(action) }}</div>
        </div>
      </nz-option>
    </ng-container>
  </nz-select>
</div>
